<template>
  <div class="dashboard-container">
    <!--账号信息-->
    <el-descriptions class="margin-top" title="用户个人信息" :column="3" :size="''" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="change(pojo)">编辑详细信息</el-button>
        <el-button type="primary" size="small" @click="changeAvatar()">更换头像</el-button>
        <el-button type="primary" size="small" @click="changeIntroduce()">修改备注信息</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ pojo.cid }}{{ pojo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i>
          状态
        </template>
        <span v-if="pojo.state===1">
        在线
      </span>
        <span v-else-if="pojo.state===2">
        审核中
      </span>
        <span v-else-if="pojo.state===0">
        封禁
      </span>
        <span v-else>
        未知
      </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ pojo.telephone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-picture-outline"></i>
          头像
        </template>
        <el-image
            style="width: 100px; height: 100px"
            :src="baseURL+'data/picture/'+pojo.pic.url"
            :preview-src-list="[baseURL+'data/picture/'+pojo.pic.url]"
            fit='cover'
        >
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          备注
        </template>
        <p v-html=pojo.describe.content></p>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-timer"></i>
          创建时间
        </template>
        {{ pojo.creattime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-line-round"></i>
          QQ
        </template>
        {{ pojo.qq }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-round"></i>
          WX
        </template>
        {{ pojo.wx }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          Email
        </template>
        {{ pojo.email }}
      </el-descriptions-item>
    </el-descriptions>
    <!--添加填出的对话框(和修改是同一个)-->
    <el-dialog title="商家" :visible.sync="zhuche_Form">
      <el-form :model="user">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="user.name" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="QQ号" :label-width="formLabelWidth">
          <el-input v-model="user.qq" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="微信号" :label-width="formLabelWidth">
          <el-input v-model="user.wx" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth">
          <el-input v-model="user.email" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="user.telephone" autocomplete="on"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="zhuche_Form = false">取 消</el-button>
        <el-button type="primary" @click="save(user)">确 定</el-button>
      </div>
    </el-dialog>
    <!--换头像的对话框-->
    <el-dialog title="换头像" :visible.sync="Avatar">
      <center>
        <el-upload
            class="upload-demo"
            drag
            :action='baseURL + "client/"+"Picture"+"/upload?" + "OperatorId=" + user.cid'
            :on-success="saveAvatar"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </center>
    </el-dialog>
    <!--修改备注的对话框-->
    <el-dialog title="换备注" :visible.sync="Introduce">
      <el-form>
        <el-card style="height: 610px;">
          <center>
            <!--富文本-->
            <quill-editor v-model="user.describe.content" ref="myQuillEditor" style="height: 500px;"
                          :options="editorOption"
                          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                          @change="onEditorChange($event)"
            >
              <!-- 自定义toolar -->
              <div id="toolbar" slot="toolbar">
                <!-- Add a bold button -->
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-strike" title="删除线">strike</button>
                <button class="ql-blockquote" title="引用"></button>
                <button class="ql-code-block" title="代码"></button>
                <button class="ql-header" value="1" title="标题1"></button>
                <button class="ql-header" value="2" title="标题2"></button>
                <!--Add list -->
                <button class="ql-list" value="ordered" title="有序列表"></button>
                <button class="ql-list" value="bullet" title="无序列表"></button>
                <!-- Add font size dropdown -->
                <select class="ql-header" title="段落格式">
                  <option selected>段落</option>
                  <option value="1">标题1</option>
                  <option value="2">标题2</option>
                  <option value="3">标题3</option>
                  <option value="4">标题4</option>
                  <option value="5">标题5</option>
                  <option value="6">标题6</option>
                </select>
                <select class="ql-size" title="字体大小">
                  <option value="10px">10px</option>
                  <option value="12px">12px</option>
                  <option value="14px">14px</option>
                  <option value="16px" selected>16px</option>
                  <option value="18px">18px</option>
                  <option value="20px">20px</option>
                  <option value="20px">22px</option>
                  <option value="20px">24px</option>
                  <option value="20px">26px</option>
                  <option value="20px">28px</option>
                  <option value="20px">30px</option>
                </select>
                <select class="ql-font" title="字体">
                  <option value="SimSun">宋体</option>
                  <option value="SimHei">黑体</option>
                  <option value="Microsoft-YaHei">微软雅黑</option>
                  <option value="KaiTi">楷体</option>
                  <option value="FangSong">仿宋</option>
                  <option value="Arial">Arial</option>
                </select>
                <!-- Add subscript and superscript buttons -->
                <select class="ql-color" value="color" title="字体颜色"></select>
                <select class="ql-background" value="background" title="背景颜色"></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                <!-- You can also add your own -->
                <button class="ql-link" title="链接"></button>
                <button class="ql-image" title="图片"></button>
                <button class="ql-video" title="视频"></button>
              </div>
            </quill-editor>
          </center>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Introduce = false">取 消</el-button>
        <el-button type="primary" @click="saveIntroduce()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {
  Quill,
  quillEditor
} from 'vue-quill-editor'
import '../../../src/assets/css/font.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {mapActions} from "vuex";
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px']
Quill.register(Size, true)

// 自定义字体类型
let fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  '宋体', '黑体'
]
let Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  name: "Profile",
  components: {
    quillEditor,
    ...mapGetters([
      'name'
    ]),
  },
  data() {
    return {
      /**
       * @用户表单数据
       * */
      pojo: this.$helper.clone(this.$store.getters.getUser),
      /**
       *@pojo保存数据的备份
       */
      user: this.$helper.clone(this.$store.getters.getUser),
      /**
       * @富文本默认内容
       * */
      editorOption: {
        placeholder: "请输入",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      },
      /**
       * @套餐展示
       * */
      packageDialogVisible: false,
      /**
       * @后端controller名字
       * */
      controller: this.$store.state.controller.Login,
      /**
       * @注册表单
       * */
      zhuche_Form: false,
      /**
       * @注册表单统一宽度
       * */
      formLabelWidth: '100px',
      /**
       * @头像
       * */
      Avatar: false,
      /**
       * @备注
       * */
      Introduce: false,
    };
  },
  computed: {
    /**
     * @获取后端路由
     * */
    baseURL() {
      return this.$store.state.baseURL;
    }
  },
  /**
   * @加载数据
   */
  created() {
    this.LoadMsg();
  },
  methods: {
    ...mapActions(["setUser"]),
    /**
     *
     * @导入个人信息
     */
    LoadMsg() {
    },
    /**
     *
     * @更新当前页面的数据(data<->this.$store.state)
     */
    LoadInfo(val) {
    },
    /**
     * @修改
     * */
    change(val) {
      //console.log(val)
      this.user = this.$helper.clone(val);
      this.zhuche_Form = true;
    },
    /**
     * @保存
     */
    save(val) {
      //console.log(val)
      let _this = this;
      this.axios.post(this.$store.state.baseURL + 'client/' + this.controller + '/signup?',
          {
            cid: val.cid,
            creattime: "",
            name: val.name,
            pic: val.pic,
            qq: val.qq,
            wx: val.wx,
            sex:val.sex,
            age:val.age,
            vip:val.vip,
            email: val.email,
            describe: val.describe,
            password: val.password,
            state: val.state,
            telephone: val.telephone
          })
          .then(res => {
            console.log(res.data)
            if (res.data === "注册==>成功") {
              // 更新用户信息
              let user = JSON.stringify(val);
              localStorage.setItem("user", user);
              this.setUser(user);
              // 隐藏注册组件
              _this.zhuche_Form = false;
              // 弹出通知框提示注册成功信息
              _this.notifySucceed("保存成功");
              _this.pojo=_this.$helper.clone(val);
              _this.user=_this.$helper.clone(val);
            } else {
              // 弹出通知框提示注册失败信息
              _this.notifyError(res.data);
            }
          }).catch(err =>{
            console.log(err);
      })

    },
    /**
     * @换头像
     * */
    changeAvatar() {
      this.Avatar = true;
    },
    /**
     * @保存头像
     * */
    saveAvatar(response) {
      console.log(response)
      this.user.pic = response;
      this.save(this.user);
      this.Avatar = false;
    },
    /**
     * @换备注
     * */
    changeIntroduce() {
      this.Introduce = true;
    },
    /**
     * @保存头像
     * */
    saveIntroduce() {
      let _this = this;
      this.axios.post(this.$store.state.baseURL + 'client/' + 'Introduce' + '/save?' + 'OperatorId=' + this.$store.getters.getUser.cid,
          {
            iid: "",
            creattime: "",
            updatetime: "",
            content: _this.user.describe.content,
            state: 1,
          })
          .then(res => {
            _this.user.describe.iid = res.data;
            //console.log(_this.pojo.describe.lid);
            _this.save(_this.user);
            this.Introduce = false;
          })
    },
    /**
     * @失去焦点事件
     * */
    onEditorBlur() {
    },
    /**
     * @获得焦点事件
     * */
    onEditorFocus() {
    },
    /**
     * @内容改变事件
     * */
    onEditorChange() {
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

span {

  display: -moz-inline-box;
  display: inline-block;
  width: 500px;
}
</style>